<!DOCTYPE html>
<html lang="en">

<!-- 大量 html来自于 模板 fragment -->
<head th:replace="~{_fragments:: head(~{::title})}">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../static/semantics-dist/semantic.min.css" th:href="@{/semantics-dist/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

    <script src="../static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}" ></script>
    <script src="../static/semantics-dist/semantic.min.js" th:src="@{/semantics-dist/semantic.min.js}" ></script>
</head>


<style >
    body {

        background-image: url(/images/background2.png);
        /*background-size: cover;*/
        /*background-position: center;*/
        /*background-repeat: no-repeat;*/
        /*background-attachment: fixed;*/
    }
</style>

    <body >
<!-- <body  th:style="'background-image: url(/images/background.jpg); '" >-->
<!--       th:style="'background-image: url(/images/background.jpg}); background-size: cover; background-position: center; background-repeat: no-repeat;'">-->




<script>
    document.addEventListener('DOMContentLoaded', function () {
        var nav = document.querySelector('#myNavbar');
        var img = document.querySelector('#cz-bg-img');

        window.addEventListener('scroll', function () {
            var scrollPosition = window.scrollY;
            var imgBottomPosition = img.getBoundingClientRect().bottom;


            var triggerPosition1 = imgBottomPosition *0.25;
            var triggerPosition2 = imgBottomPosition *0.75;
            nav.classList.add('nav-show');
            // if (scrollPosition> triggerPosition2) {
            //     nav.classList.remove('nav-hidden');
            //     nav.classList.add('nav-show');
            // } else {
            //     nav.classList.remove('nav-show');
            //     nav.classList.add('nav-hidden');
            // }
        });
    });

</script>

<nav  th:replace="~{_fragments ::menu(1)}" class = "ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container m-shadow-small"  >
        <div class="ui inverted secondary stackable menu">
            <h3 class="ui teal header item">学途智助</h3>
            <a class="m-item m-mobile-hidden item"> <i class="ui home icon">  </i>首页</a>
            <a class="m-item m-mobile-hidden item"> <i class="ui idea icon">  </i>分类</a>
            <a class="m-item m-mobile-hidden item"><i class="ui tags icon">  </i>标签</a>
            <a class="m-item m-mobile-hidden item"><i class="ui clone icon">  </i>归档</a>
            <a class="m-item m-mobile-hidden item"><i class="ui info icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon inverted input">
                    <input type="text" placeholder="搜索....">
                    <i class="ui search icon"></i>

                </div>
            </div>
        </div>

    </div>
    <a href="#" class="ui menu toggle m-mobile-show black button">
        <i class="sidebar icon m-top-right "></i>
    </a>
</nav>

首图之后
<!--th:style="'background :url(/images/anime11.png);'"-->
<div alt="" id="cz-bg-img" class="cz-bg-section cz-bg-img " th:style="'background: url(/images/background2.png;); background-position: 50% 90px;'">
    <div class="m-bg-class_cover" align="center" style="bottom: -180px;">
        <p class="cz-index-title" style="transform: translateY(90px);">- 学途智助 -</p>
        <p class="cz-index-title2" style="transform: translateY(90px);">全方位学习伙伴，智慧记录每一步 —— 学途智助，让知识触手可及，心灵沟通无间。</p>
    </div>
</div>


<!--本代码 图片逻辑 -->

    <!--    中间内容 -->
<br><br>

    <div class="m-padded-tb-large " >

        <div class="ui container">
            <div class="ui two stackable grid">
<!--                实际上包括文章栏在内的文章区域 左边的文章列表-->
                <div class="eleven wide column m-padded-tb-large">
                    <div class="ui top   attached segment">
<!--                        头部-->
                        <div class="ui middle aligned two column grid">
<!--                            two column 要一起 不分开-->
                            <div class="  column">
                                <h3 class="ui teal header">文章 </h3>
                            </div>

                            <div class="   right aligned column">
                                共
                                <h2 class="ui orange header m-inline-block" th:text="${page.totalElements}">14</h2>

                                篇
                            </div>

                        </div>


                    <!--content-->

                    <div class="ui attached   segment">

                        <!--                    单独文章-->
                        <div class="ui padded segment m-padded-tb-large" th:each="blog :${page.content}">
                            <div class="ui mobile reversed stackable  grid" >

                                <div class="ui eleven wide column">


                                    <div class="flex-container">
                                    <h3 class="ui header" ><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">深化单词</a></h3>
                                    <p class="m-text" th:text="|${blog.description}......|"> 深化单词理解
                                        上下文学习：将单词放入句子或短文中，理解其在具体语境中的含义和用法。并更好地理解其背后的文化和语境。
                                        词根词缀：学习词根和词缀的知识，更容易记忆和推测新单词的含义。
                                        同义词和反义词：并在写作和阅读中更灵活地运用。</p>
<!--                                    引入新的参数才会让描述换行 -->
                                    </div>

                                    <div>
                                        <div class="ui grid">
                                            <div class="twelve wide column">
                                                <div class="ui mini horizontal link list">
                                                    <div class="item">
                                                        <img alt=""  class="ui avatar image"   th:src="@{${blog.user.avatar}}" > <!-- 头像 -->

                                                        <div class="content">
                                                            <a href="#" class="header" th:href="@{/user/{id}(id=${blog.user.id})}" th:text="${blog.user.nickname}">长野原美绪</a><!-- 名字 -->
                                                        </div>
                                                    </div>
                                                    <div class="item">
                                                        <i class="calendar icon" ></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2024-2-15</span>
                                                    </div> <!--    时间 -->
                                                    <div class="item">
                                                        <i class="eye icon"></i> <span th:text="${blog.views} ">55555</span>
                                                    </div> <!--    观看数   -->

                                                </div>
                                            </div>
                                           <div class="ui right aligned middle aligned four wide  column m-padded-mini m-text-thin">
                                                <a href="#" target="_blank" class="ui teal mini basic  left pointing label" th:href="@{'/types?page=' + ${0} + '&id=' + ${blog.type.id}}"  th:text="${blog.type.name}">认知升级</a>

                                            </div>
                                        </div>
                                    </div>



                                </div>
<!--                                &lt;!&ndash;                        首图&ndash;&gt;-->

                                <div class="five wide column">
                                    <div class="image-wrapper">
                                    <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                                        <img  src="../static/images/mio1.png" th:src="@{${blog.firstPicture}}"  alt="" class="ui img3to2   image">
                                    </a>
                                    </div>
                                </div>
                            </div>
                            <!--                        </div>-->
                        </div>
                            </div>
                   </div>
                        <!--              footer          底部-->
                    <div>
                        <div class="ui attached segment"  th:if="${page.totalPages}>1">
                            <div class="ui middle aligned two column grid">
                                <div class="  column">
                                    <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
                                </div>
                                <div class=" right aligned column">
                                    <a href="#" class="ui teal basic button" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}">下一页</a>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

<!--侧边栏-->

                <div class="five wide column m-padded-tb-small ">

<!--分类卡片-->
                    <div class="ui  segments m-margin-tb-large">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class=column>
                                    <i class="idea icon"> </i>分类
                                </div>
                                <div class="right aligned column">
                                <a href=""   target="_blank" th:href="@{'/types?page=0&id=-1' }">更多<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui red segment ">
                            <div class="ui vertical fluid menu" >
                                <a href="#" class="item" th:href="@{'/types?page=' + ${0} + '&id=' + ${type.id}}"   th:each="type : ${types}">
                                    <span th:text="${type.name}">学习日志</span>
                                    <div class="ui teal basic left   label" th:text="${#arrays.length(type.blogs)}">13</div>
                                </a>
<!----->


<!--                                &lt;!&ndash; /*&ndash;&gt;-->
<!--                                <a href="#" class="item">学习日志-->
<!--                                    <div class="ui teal basic left   label">13</div>-->
<!--                                </a>-->
<!--                                <a href="#" class="item">学习日志-->
<!--                                    <div class="ui teal basic left   label">13</div>-->
<!--                                </a>-->
<!--                                <a href="#" class="item">学习日志-->
<!--                                    <div class="ui teal basic left   label">13</div>-->
<!--                                </a>-->
<!--                                <a href="#" class="item">学习日志-->
<!--                                    <div class="ui teal basic left   label">13</div>-->
<!--                                </a>-->
<!--                                <a href="#" class="item">学习日志-->
<!--                                    <div class="ui teal basic left   label">13</div>-->
<!--                                </a>-->

<!--                                &lt;!&ndash;*/&ndash;&gt;-->
                            </div>
                        </div>


                    </div>
                    <!--标签-->

                    <div class="ui  segments m-margin-tb-large">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class=column>
                                    <i class="idea icon"> </i>标签
                                </div>
                                <div class="right aligned column">
                                    <a href=""   target="_blank" th:href="@{'/tags?page=0&id=-1' }">更多<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui blue segment">


                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny" th:href="@{'/tags?page=0'+'&id=' +${tag.id }}"  th:each="tag : ${tags}">
                                <span th:text="${tag.name}" >方法论</span> <div class="detail" th:text="${#arrays.length(tag.blogs)}">23</div>
                            </a>
                            <!--/*-->
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">认知升级
                                <div class="detail">23</div>
                            </a>
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">认知升级
                                <div class="detail">23</div>
                            </a>
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">认知升级
                                <div class="detail">23</div>
                            </a>
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                                <div class="detail">23</div>
                            </a>
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                                <div class="detail">23</div>
                            </a>
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                                <div class="detail">23</div>
                            </a>
                            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论
                                <div class="detail">23</div>
                            </a>

                            <!--*/-->
                        </div>
                    </div>
                    <!--最新推荐-->

                    <div class="ui  segments m-margin-tb-large">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class=column>
                                    <i class="idea icon"> </i>最新推荐
                                </div>

                            </div>
                        </div>
                        <div class="ui segment" th:each="blog : ${recommendBlogs}">
                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black m-text-thin" th:text="${blog.title}">用户故事（User Story）</a>
                        </div>

                        <!--/*-->
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">深化单词</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">深化单词</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" class="m-black m-text-thin">深化单词</a>
                        </div>

                        <!--*/-->
                    </div>
<!--                    <h3 class="ui horizontal  divider header"> 观察ing</h3>-->
<!--                    <div class="ui centered card">-->
<!--                        <img src="../static/images/木头人观察.jpg" alt="木头人观察图" class="ui rounded image" th:src="@{/images/木头人观察.jpg}">-->
<!--                    </div>-->
                </div>
            </div>

        </div>
    </div>

    <br>
    <br>

    <footer th:replace="~{_fragments :: footer}" class="ui inverted vertical segment m-padded-tb-massive  ">


        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">

                <div class="three wide column">

                        <div class="middle aligned">

                            <img src="../static/images/mio1.png"
                                 class="ui middle aligned round image" alt="" style="width: 150px" th:src="@{/images/mio1.png}">
                        </div>


                </div>
                <div class="three wide column ">
                    <h4 class ="ui inverted header" >最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">等待填充1</a>
                        <a href="#" class="item">等待填充2</a>
                        <a href="#" class="item">等待填充3</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class ="ui inverted header">github</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">yonghuname@github.com</a>
                        <a href="#" class="item">等待填充</a>
                        <a href="#" class="item">等待填充</a>
                    </div>
                </div>

                <div class="seven wide column">

                    <h4 class ="ui inverted header">博客介绍</h4>

                    <p  class="m-text-thin m-text-spaced m-opacity-mini ">这是我的个人博客,会分享文章，也可能被拿来做todolist</p>

                </div>
            </div>

<!--111111111111111111111111111111-->

            <div class="ui inverted section divider m-padded-tb-">
            </div> <p class="m-text-thin m-text-spaced m-opacity-mini">All rights reserved  </p>
        </div>
    </footer>

</body>

<!--<script  src="https://cdn.jsdeliver.net/semantic-ui/2.2.4/semantic.min.js"></script>-->
<!--<script  src="https://cdn.jsdeliver.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->

</html>

<script>

    $(document).ready(function() {
        $('.menu.toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hidden');
        });
    });
</script>